<template>
  <div>
    <el-row>
      <el-col :span="3">
        <left-nav-menu :length="4" @select="leftMenuSelect">
          <span slot="0"><i class="icon-chart" />防洪能力演算</span>
          <span slot="1"><i class="icon-pie" />稳定性分析</span>
          <span slot="2"><i class="icon-whiteboard" />水汽反演</span>
        </left-nav-menu>
      </el-col>
      <el-col :span="21">
        <flood-calculus
          v-show="leftNavMenuIndex === '0' && dataSource"
          :tailingPondIds="tailingPondId"
        ></flood-calculus>
        <stability-analysis
          v-show="leftNavMenuIndex === '1' && dataSource"
          :tailingPondIds="tailingPondId"
        ></stability-analysis>
        <moisture-inversion
          v-show="leftNavMenuIndex === '2' && dataSource"
          :tailingPondIds="tailingPondId"
        ></moisture-inversion>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LeftNavMenu from "~/components/LeftNavMenu";
import StabilityAnalysis from "~/views/sefety-technology/StabilityAnalysis";
import MoistureInversion from "~/views/sefety-technology/MoistureInversion";
import FloodCalculus from "~/views/sefety-technology/FloodCalculus";
import axios from 'axios'
import { getTailingPondList } from '../api/api'
export default {
  name: "SafetyTechnology",
  data () {
    return {
      leftNavMenuIndex: '0',
      tailingList: [],
      tailingPondId: null,
      dataSource: false
    }
  },
  components: {
    FloodCalculus,
    MoistureInversion,
    StabilityAnalysis,
    LeftNavMenu
  },
  methods: {
    leftMenuSelect (index) {
      this.leftNavMenuIndex = index;
    },
    async getTailingList () {
      const res = await getTailingPondList({ unitId: sessionStorage.getItem('unitId') })
      if (res.resultCode == '200') {
        this.tailingList = res.parameter;
        console.log(this.tailingList);
        this.tailingPondId = this.tailingList[0].id  //默认选中
        if (this.tailingPondId !== null) this.dataSource = true
      }

    },
    changeSelsct (val) {
      console.log(val);
      this.tailingPondId = val //默认选中
    }
  },
  created () {
    this.getTailingList()
  }
}
</script>

<style scoped>
span {
  font-size: 1.4em;
}
i {
  margin-right: 12px;
  font-size: 1.2em;
  color: black;
}
.el-select {
  width: 12vw;
  margin-top: 5px;
}
</style>
